<!-- 任务执行情况 -->
<template>
  <el-dialog title="选择人员" :visible.sync="dialogTableVisible" @close="$emit('update:visible',false)"
             close-on-click-modal="false">
    <el-table :data="userList"
              height="300"
              @select-all="selectAll"
              @select="selectFnBox"
              :stripe="tableStripe"
              :border="tableBorder"
              tooltip-effect="dark"
              ref="table">
      <el-table-column
              type="selection"
              width="50"
              align="center">
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="scope">
          {{scope.row.classes?scope.row.classes.class_name:'未记录'}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realname" align="center"></el-table-column>
    </el-table>
    <el-pagination
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="pageUserTotal"
            @current-change="handleUserChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="userlistGet('yse')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import api from '@/utils/api.js'

  export default {
    name: 'taskListDialog',
    props: ['visible', 'dialogId', 'userLine', 'userNumber'],
    watch: {
      visible () {
        this.dialogTableVisible = this.visible
      }
    },
    data () {
      return {
        dialogTableVisible: this.visible,
        userList: [],
        user_id: null,
        taskPageTotal: 0,
        userPage: 1,
        applyBookBox: {}, // 选中人员信息,缓存分页选择的数据
        applyBookBoxInit: {}, // 本页面对应对象
        pageSize: 20, //  每页的条数
        pageUserTotal: null
      }
    },
    created () {
      this.db.findOne({
        name: 'user_id'
      }, (err, ret) => {
        console.log(err), this.user_id = ret.value
      })
      this.InitFn()
      console.log('收到的id：', this.taskId)
    },
    methods: {
      InitFn () {
        let _this = this
        this.$fetch(api.admin_user_index, {p: this.userPage}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.userList = response.list.data
            this.pageUserTotal = response.list.total
            let applyBookBoxInit = {}
            for (let i = 0; i < response.list.data.length; i++) {
              applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
            }
            this.applyBookBoxInit = applyBookBoxInit
            _this.$nextTick(function () {
              _this.checked() // 每次更新了数据，触发这个函数即可。
            })
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 点击全选
      selectAll (val) {
        // 全选所有跟空值，即使页面已经选择2项
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // this.handleSelection = val
          for (let i = 0; i < val.length; i++) {
            if (!applyBookBox[val[i].id]) {
              // 不存在图书
              applyBookBox[val[i].id] = val[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i = 0; i < this.arryList.length; i++) {
            if (this.applyBookBox[this.arryList[i].id]) {
              // 存在图书删除
              delete applyBookBox[this.arryList[i].id]
            }
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      // 点击单选
      selectFnBox (val) {
        // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
        let applyBookBox = this.applyBookBox
        console.log('单机选项：', val)
        if (val.length !== 0) {
          // 有选项 对本页面的选项进行比对
          let valBox = {}
          for (let i = 0; i < val.length; i++) {
            valBox[val[i].id] = val[i]
          }
          for (let i in this.applyBookBoxInit) {
            if (valBox[i]) {
              // 存在图书删除
              applyBookBox[i] = this.applyBookBoxInit[i]
            } else {
              delete applyBookBox[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i in this.applyBookBoxInit) {
            delete applyBookBox[i]
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      userlistGet () {
        console.log('applyBookBox:', this.applyBookBox)
        console.log('applyBookBoxInit:', this.applyBookBoxInit)
        // 确认选择
        let applyBookBox = this.applyBookBox
        if (JSON.stringify(applyBookBox) === '{}') {
          this.$alert('请选择需要转派的人员！', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        } else {
          let userName = ''
          let userId = ''
          for (let i in applyBookBox) {
            userName += applyBookBox[i].realname + ','
            userId += applyBookBox[i].id + ','
          }
          userName = userName.substring(0, userName.length - 1)
          userId = userId.substring(0, userId.length - 1)
          console.log(userName)
          console.log(userId)
          console.log('本人物的执行者：', this.userLine)
          let userInfo = this.userLine.split(',')
          let userIdNumber = userId.split(',')
          let title = ''
          if (this.userNumber === 1 && userIdNumber.length > 1) {
            this.$message.error('只能选择一位用户!')
            return
          }
          // 需判断单选多选之间的联系
          if (userInfo.indexOf(userId) !== -1) {
            this.$message.error('请另选，他已是本任务执行者')
            return false
          }
          this.$confirm('你确认将任务转派给：' + userName + '？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 请求转派接口 ,转派人员id userId
            this.$post(api.admin_reply, {users: userId, id: this.dialogId}).then((response) => {
              console.log('数据：', response)
              if (response.code === 0) {
                this.$message({
                  type: 'success',
                  message: '转派成功!'
                })
                this.dialogTableVisible = false
                this.$emit('getUser')
              } else {
              }
            }).catch((err) => {
              console.log(err)
            })
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消转派'
            // })
          })
        }
      },
      // 用户人员分页
      handleUserChange (val) {
        this.userPage = val
        this.InitFn()
      }
    }
  }
</script>
